/*
 * @Desc:
 * @author cheegon
 * @date 2024/07/29  上午9:30
**/

/* 三角形 */
.triangle-up:after { content: ' ';width: 0;height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  position: absolute;top: -8px;right: 7px;}

.triangle-down:after {
  content: ' ';width: 0;height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  position: absolute;top: -8px;right: 7px;}

.triangle-b::after {
  content: ' ';
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #ff4f05;
}

/* flex 布局 */
.dflex{display: flex; align-items: center;}
.dflex-c{display: flex; justify-content: center; align-items: center;}
.dflex-s{display: flex; align-items: flex-start;}
.dflex-e{display: flex; justify-content: flex-end; align-items: baseline;}
.dflex-es{display: flex; justify-content: flex-end; align-items: flex-start;}
.dflex-a{display: flex; justify-content: space-around; align-items: center;}
.dflex-b{display: flex; justify-content: space-between; align-items: center;}
.dflex-j{display: flex; justify-content: space-between; flex-flow: column;}
.dflex-flow{flex-flow: column;}
.dflex-row{flex-flow: row;}
.dflex-col{flex-flow: column;}
.dflex-wrap-w{-ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.row-start {align-items: flex-start;}
.row-end {align-items: flex-end;}
.row-line {align-items: baseline;}

/* 下边框线 */
.border-bottom{border-bottom: 1px solid #f5f5f5;}
.border-bottom-dotted {border-bottom: 1px dashed #f5f5f5;}

/* 文字超出省略 */
.clamp {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;}
.clamp-2{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

.ws-np {white-space: nowrap;}
.line-height-0 {line-height: 0;}
.line-height-1 {line-height: 1;}
.line-height-item {line-height: 60px;}

/* 文字对齐 */
.tac{text-align: center;}
.tar{text-align: right;}
.tal{text-align: left;}

/* 相对定位|绝对定位|固定定位 */
.fixed{position: fixed;z-index: 1;}
.pos-r{position: relative;}
.pos-f{position: fixed;z-index: 1;}
.pos-a{position: absolute;}
.pos-t-c { top: 50%; transform: translateY(-50%); }
.pos-l-c { left: 50%; transform: translateX(-50%); }
.pos-tl-c { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pos-top {top: 0}
.pos-right {right: 0}
.pos-bottom {bottom: 0}
.pos-left {left: 0}
.pos-full{top:0; right: 0; bottom: 0; left: 0;}

.pos-t-full {top:0;left:0;right:0;}
.pos-b-full {bottom: 0;left: 0;right: 0;}

/* 外边距 */

.margin-0{margin: 0;}
.margin-xs{margin: 10px;}
.margin-sm{margin: 20px;}
.margin{margin: 30px;}
.margin-lg{margin: 40px;}
.margin-xl{margin: 50px;}
.margin-big{margin: 100px;}

.margin-top-xs{margin-top: 10px;}
.margin-top-sm{margin-top: 20px;}
.margin-top{margin-top: 30px;}
.margin-top-lg{margin-top: 40px;}
.margin-top-xl{margin-top: 50px;}
.margin-top-xxl{margin-top: 60px;}
.margin-top-big{margin-top: 100px;}

.margin-bottom-xs{margin-bottom: 10px;}
.margin-bottom-sm{margin-bottom: 20px;}
.margin-bottom{margin-bottom: 30px;}
.margin-bottom-lg{margin-bottom: 40px;}
.margin-bottom-xl{margin-bottom: 50px;}
.margin-bottom-xxl{margin-bottom: 60px;}
.margin-bottom-big {margin-bottom: 100px;}

.margin-left-xs{margin-left: 10px;}
.margin-left-sm{margin-left: 20px;}
.margin-left{margin-left: 30px;}
.margin-left-lg{margin-left: 40px;}
.margin-left-xl{margin-left: 50px;}
.margin-left-auto{margin-left: auto;}

.margin-right-xs{margin-right: 10px;}
.margin-right-sm{margin-right: 20px;}
.margin-right{margin-right: 30px;}
.margin-right-lg{margin-right: 40px;}
.margin-right-xl{margin-right: 50px;}

.margin-lr-xs{margin-left: 10px;margin-right: 10px;}
.margin-lr-sm{margin-left: 20px;margin-right: 20px;}
.margin-lr{margin-left: 30px;margin-right: 30px;}
.margin-lr-lg{margin-left: 40px;margin-right: 40px;}
.margin-lr-xl{margin-left: 50px;margin-right: 50px;}

.margin-tb-xs{margin-top: 10px;margin-bottom: 10px;}
.margin-tb-sm{margin-top: 20px;margin-bottom: 20px;}
.margin-tb{margin-top: 30px;margin-bottom: 30px;}
.margin-tb-lg{margin-top: 40px;margin-bottom: 40px;}
.margin-tb-xl{margin-top: 50px;margin-bottom: 50px;}

/* 内边距 */
.padding-0{padding: 0;}
.padding-xs{padding: 10px;}
.padding-sm{padding: 24px;}
.padding{padding: 30px;}
.padding-lg{padding: 40px;}
.padding-xl{padding: 50px;}
.padding-16{padding: 16px;}

.padding-top-xs{padding-top: 10px;}
.padding-top-sm{padding-top: 20px;}
.padding-top{padding-top: 30px;}
.padding-top-lg{padding-top: 40px;}
.padding-top-xl{padding-top: 50px;}
.padding-top-big{padding-top: 100px;}

.padding-bottom-xs{padding-bottom: 10px;}
.padding-bottom-sm{padding-bottom: 20px;}
.padding-bottom{padding-bottom: 30px;}
.padding-bottom-lg{padding-bottom: 40px;}
.padding-bottom-xl{padding-bottom: 50px;}
.padding-bottom-big{padding-bottom: 100px;}

.padding-left-xs{padding-left: 10px;}
.padding-left-sm{padding-left: 20px;}
.padding-left{padding-left: 30px;}
.padding-left-lg{padding-left: 40px;}
.padding-left-xl{padding-left: 50px;}

.padding-right-xs{padding-right: 10px;}
.padding-right-sm{padding-right: 20px;}
.padding-right{padding-right: 30px;}
.padding-right-lg{padding-right: 40px;}
.padding-right-xl{padding-right: 50px;}
.padding-right-0{padding-right: 0;}

/* 字体*/
.ft-main { color: #333; }
.ft-dark { color: #bbb; }
.ft-dark-3 { color: #737373; }
.ft999 { color: #999; }

/* 图片*/
.image-60 {width: 60px; height: 60px;}
.image-80 {width: 80px; height: 80px;}
.image-100 {width: 100px; height: 100px;}





